$(function(){
 
 $(".nav ul li:nth-child(1)").click(function(){
  
$(".box").css({"transform": "rotateY(0deg) rotateX(0deg) rotateZ(0deg)  translate3d(0px,0px,0px)"});
 $(".mine1").animate({opacity:"1"}).siblings().animate({opacity:"0.5"})
 	
 

})

$(".nav ul li:nth-child(2)").click(function(){
  
$(".box").css({"transform": "rotateY(0deg) rotateX(0deg) rotateZ(-10deg)  translate3d(-1650px,200px,1200px)"})
 $(".mine2").animate({opacity:"1"}).siblings().animate({opacity:"0.5"})


})



$(".nav ul li:nth-child(3)").click(function(){
  
$(".box").css({"transform": "rotateY(0deg) rotateX(0deg) rotateZ(10deg)  translate3d(100px, 980px, 3000px)"})
$(".mine3").animate({opacity:"1"}).siblings().animate({opacity:"0.5"})

})
$(".nav ul li:nth-child(4)").click(function(){
  
$(".box").css({"transform": "rotateY(180deg) rotateX(0deg) rotateZ(0deg)  translate3d(800px, 600px, -600px)"})
$(".mine4").animate({opacity:"1"}).siblings().animate({opacity:"0.5"})
 


})
$(".nav ul li:nth-child(5)").click(function(){ 
$(".box").css({"transform": "rotateY(0deg) rotateX(0deg) rotateZ(0deg)  translate3d(800px, 600px, -1800px)"})
$(".mine5").animate({opacity:"1"}).siblings().animate({opacity:"0.5"})
})
$(".btn").click(function(){
$('.mate').animate({top:"-800px"},500);
$(".mate2").css({"left":"0"});
$(".mate3").animate({top:"200"},1000);
})


$(".mine1 .mate2 h1").mouseover(function(){
  $(".mine1 .mate2 h1").css({"transform":"rotateY(-180deg)"})
  $(".mine1 .mate2 .wechat").css({"transform":"rotateY(0deg)"})

})


$(".mine1 .mate2 .wechat").mouseout(function(){
  $(".mine1 .mate2 h1").css({"transform":"rotateY(0deg)"})
  $(".mine1 .mate2 .wechat").css({"transform":"rotateY(-180deg)"})

})

var size=$(".bg div").size();
var i=0;
function move(){
  $(".bg div").eq(i).animate({opacity:1},1000).siblings().animate({opacity:0},2000);
  

}
var t=setInterval(function(){
           
                if(i==size){i=0;}
                move();
                i++
         },5000);


 var t2=setInterval(function(){
var l= $(".sky").css('left');
  if(l<-4000){
    $(".sky").css({"left":"0"})
  }else{
  $(".sky").animate({left: $(".sky").offset().left-1},50);
}
},100)







var canvas=document.getElementById('canvas');
var context=canvas.getContext("2d");
canvas.width=1200;
canvas.height=600;

context.moveTo(50,90);
context.lineTo(60,90);
context.lineTo(60,30);
context.lineTo(230,30);
context.lineTo(230,90);
context.lineTo(730,90);
context.lineTo(730,350);
context.lineTo(230,350);
context.lineTo(230,300);
context.lineTo(60,300);
context.lineTo(60,360);

context.lineTo(60,480);
context.lineTo(0,480);

context.strokeStyle="#28bad0";
context.stroke();




$("#canvas").css({"z-index":"100","position":"absolute","top":"0"})


var a=0;

$(".btn_r").click(function(){

a++;
move5();
})
$(".btn_l").click(function(){

a--;
move5();

})

             
    function move5() {
        if(a>=6){
          $('.nav5 ul').css({left:0});
         a=1;
        }
         if(a<=-1){
          $('.nav5 ul').css({left:-4000});
          a=4;
        }
             
              $(".nav5 ul").stop().animate({left:-a*800},1000)   
              }         

 document.oncontextmenu=function(){
        return false;
      }


})
